{% extends 'base/base.html' %}
{% load i18n l10n admin_urls static %}
{% load app_extras static %}
{% block extra-css %}
<link href="{% static 'idcops/css/select2.min.css' %}" type="text/css" media="all" rel="stylesheet">
{% endblock extra-css %}

{% block content-header %}
<h1>{{meta.verbose_name}}
<small>
  <b class="text-red"> {{queryset.count}} </b>个机柜
</small>
</h1>
{% endblock %}
{% block main-content %}

{% block form %}
<form method="post" class="form">
  {% csrf_token %}
<div class="box box-warning">
  <div class="box-header with-border">
    <h3 class="box-title">请您确认{{action_name}}清单</h3>
    <div class="box-tools pull-right">
      <input type="hidden" name="action" value="{{action}}" />
      <input type="hidden" name="post" value="yes" />
      <input type="submit" class="btn btn-danger btn-sm margin-r-5" value="确定{{action_name}}" />
      <a href="{%url 'idcops:list' meta.model_name%}" class="btn btn-default btn-sm">
        <span>返回列表</span>
      </a>
    </div>
  </div>
  <div class="box-body table-responsive margin-bottom">
  <table id="item-list" class="table table-bordered table-condensed">
    <thead>
      <tr class="active">
        <th width="3%"> #</th>
        <th>机柜名称</th>
        <th>机柜别名</th>
        <th>所在区域</th>
        <th width="25%">分配客户</th>
        <th width="10%">合同电力(A)</th>
        <th width="10%">到期时间</th>
        <th width="13%">机柜状态</th>
        <th width="13%">机柜类型</th>
      </tr>
    </thead>
    <tbody>
      {% for obj in queryset %}
      <input type="hidden" name="index" value="{{ obj.pk|unlocalize }}" />
      <input type="hidden" name="items" value="{{obj.pk}}" />
      <tr class="{% cycle '' 'active' %}">
        <td style="vertical-align:middle;">{{forloop.counter}}.</td>
        <td style="vertical-align:middle;">
          <a data-toggle="modal" data-target="#modal-lg" href="{{obj.get_absolute_url}}">{{obj}}</a>
        </td>
        <td style="vertical-align:middle;">{{obj.cname}}</td>
        <td style="vertical-align:middle;">{{obj.zone}}</td>
        <td class="clearfix" style="vertical-align:middle;">
          <select name="client-{{obj.pk}}" required class="form-control">
            <option value="">请选择一个客户</option>
            {%for client in clients%}
            <option value="{{client.id}}">{{client}}</option>
            {%endfor%}
          </select>
        </td>

        <td style="vertical-align:middle;">
          <input id="cpower-{{obj.pk}}" required="required" class="form-control" type="number" name="cpower-{{obj.pk}}" value="10" />
        </td>

        <td style="vertical-align:middle;">
          <input id="expiry_date-{{obj.pk}}" class="form-control" type="date" name="expiry_date-{{obj.pk}}" />
        </td>

        <td class="clearfix" style="vertical-align:middle;">
          <select name="status-{{obj.pk}}" class="form-control">
            {%for s in status%}
            <option value="{{s.id}}"{%if s.master%}selected{%endif%}>{{s}}</option>
            {%endfor%}
          </select>
        </td>

        <td class="clearfix" style="vertical-align:middle;">
          <select name="style-{{obj.pk}}" class="form-control">
            {%for style in styles%}
            <option value="{{style.id}}"{%if style.master%}selected{%endif%}>{{style}}</option>
            {%endfor%}
          </select>
        </td>
      </tr>
      {%endfor%}
    </tbody>
  </table>
  </div>

  <div class="box-footer">
    <div class="box-tools pull-right">
      <b>合计：</b><span id="total">{{queryset.count}}</span> 个
    </div>
  </div>
</div>
</form>
{% endblock form %}
{% endblock main-content %}

{% block extra-js%}
<script type="text/javascript" src="{%static 'idcops/js/select2.min.js' %}"></script>
<script type="text/javascript" src="{%static 'idcops/js/i18n/zh-CN.js' %}"></script>
<script>
$(document).ready(function (){

// reset modal cache
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

// Select2
var Select = $("select");
if (Select.length != 0) {
  $("select").select2({language: "zh-CN"});
}

});

</script>
{% endblock extra-js%}
